<template>
  <div class="app-container">
    <PageSearch
      :showSearch.sync="showSearch"
      :getList="getList"
      :handleQuery="handleQuery"
      :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input
                v-model="queryParams.skuNo"
                :placeholder="$t('sku编号')"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="recordsType">
              <!-- 出入库记录类型：1扫码入库，2根据采购单入库，3退货入库，4.盘点入库，11订单出库，12过期销毁，13损坏出库，14补发出库，15盘点出库 -->
              <el-select
                :placeholder="$t('类型')"
                clearable
                @change="handleQuery"
                v-model="queryParams.recordsType">
                <el-option
                  :key="item.dictValue"
                  :value="item.dictValue"
                  v-for="item in out_warehouse_type_list"
                  :label="item.dictLabel" />
              </el-select>
            </el-form-item>
            <el-form-item prop="recordsDistrId">
              <el-select
                :placeholder="$t('租户')"
                clearable
                @change="handleQuery"
                filterable
                v-model="queryParams.recordsDistrId">
                <el-option
                  :value="item.value"
                  :label="item.name"
                  v-for="(item, index) in distributorList"
                  :key="index" />
              </el-select>
            </el-form-item>
            <el-form-item prop="businessId">
              <el-input
                :placeholder="$t('业务id')"
                v-model="queryParams.businessId"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions> </template>
    </PageSearch>

    <el-table
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId">
      <!-- sku编号、类型、业务id、出入数量、操作时间 -->
      <el-table-column show-overflow-tooltip :label="$t('sku编号')" align="center" prop="skuNo" />
      <el-table-column show-overflow-tooltip :label="$t('类型')" align="center" prop="type">
        <template slot-scope="{ row }">
          <span :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="业务id" align="center" prop="businessId" />
      <el-table-column show-overflow-tooltip label="租户名称" align="center" prop="distrName" />
      <el-table-column show-overflow-tooltip label="租户类型" align="center" prop="distrType">
        <template slot-scope="{ row }">
          <!-- 	租户类型 1-商家 2-供应商 -->
          <div v-if="row.distrType == 1">商家</div>
          <div v-if="row.distrType == 2">供应商</div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="出入数量" align="center" prop="outNum" />
      <el-table-column show-overflow-tooltip label="操作后库存" align="center" prop="afterNum" />
      <el-table-column show-overflow-tooltip label="操作时间" align="center" prop="createTime" />
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { getDistributorList, platformStockPositionRecords } from '@/api/distribution/sku/outInStoreRecord'
import { useDict } from '@/utils/useDict'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'OutInStoreRecord',
  components: {},
  data() {
    return {
      /**出入库记录类型 */
      out_warehouse_type_list: [],
      showSearch: false,
      distributorList: [],
      title: '',
      tableData: [],
      showDialog: false,
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getList()
    this.getDistributorList()
    useDict('out_warehouse_type').then(({ out_warehouse_type }) => {
      this.out_warehouse_type_list = out_warehouse_type
    })
  },

  methods: {
    getDistributorList() {
      getDistributorList().then((res) => {
        this.distributorList = res.rows.map((item) => {
          return {
            name: `${item.name}${item.type == 1 ? '（商家）' : '（供应商）'}`,
            value: item.distrId,
          }
        })
      })
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.handleQuery()
    },
    handleType(type) {
      const index = this.out_warehouse_type_list.findIndex((i) => i.dictValue == type)
      return this.out_warehouse_type_list[index]?.dictLabel
    },
    handleOpen() {},

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      platformStockPositionRecords(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
